<template>
	<view class="container">
		<!-- 特权按钮 -->
		<view class="vip-bths">
			<text class="v-title">会员特权</text>
			<text>同意<text class="tips" @click="toParse">《特权服务协议》</text></text>
			<view class="show-bth" @click="showMypop">
				享用特权
			</view>
		</view>
		<view class="power-list">
			<text class="list-title">特权会员权益</text>
			<view class="list-box">
				<view class="list-item" v-for="(item,index) in navItems" :key="index">
					<view class="list-image">
						<image :src="item.icon" mode="scaleToFill"></image>
					</view>
					<text class="item-title">{{item.title}}</text>
					<text class="item-text">{{item.text}}</text>
				</view>
			</view>
		</view>
		<view class="main-buttons">
			购买特权礼包既享各种服务权益
		</view>
		<view class="power-call">
			<text class="call-title">会员收益</text>
			<view class="call-item">
				<view class="call-left">
					<text class="call-name">会员每日分红</text>
					<text class="call-text"><text class="red-x">*</text>交易越多，分红领取越多，金额上不封顶</text>
				</view>
				<view class="buttons" @click="noOpen">
					前往参与
				</view>
			</view>
			<view class="call-item">
				<view class="call-left">
					<text class="call-name">团队奖励</text>
					<text class="call-text"><text class="red-x">*</text>成员有激活，团队收益自动入账</text>
				</view>
				<view class="buttons" @click="noOpen">
					查看团队
				</view>
			</view>
		</view>
		<view class="power-call">
			<text class="call-fin">保障说明</text>
			<view class="texts-fin">
                1、使用12个月以上<br/> 2、每个月5000流水 <br/>3、不能逾期 <br/>4、不能出租、出借、转租
			</view>
		</view>
		<view class="main-buttons">
			有激活就有会员分红奖励
		</view>
		<view class="return-list">
			<view class="return-title">
				邀请激活获刷卡返现
			</view>
			<view class="return-table">
				<view class="table-tr">
					<text>特权</text>
					<text>普通用户</text>
					<text>特权会员</text>
				</view>
				<view class="table-td">
					<text>秒到费</text>
					<text>可领1笔</text>
					<text>无限制</text>
				</view>
				<view class="table-td">
					<text>返现特权</text>
					<text>万3</text>
					<text>会员商费率</text>
				</view>
				<view class="table-td">
					<text>会员身份</text>
					<uni-icons type="closeempty" color="red" size="30" />
					<text>长期享用</text>
				</view>
				<view class="table-td">
					<text>会员工具</text>
					<uni-icons type="closeempty" color="red" size="30" />
					<text>可赚取高额收益</text>
				</view>
				<view class="table-td">
					<text>会员分红</text>
					<uni-icons type="closeempty" color="red" size="30" />
					<text>长期利润</text>
				</view>
				<view class="table-td">
					<text>特权商户</text>
					<uni-icons type="closeempty" color="red" size="30" />
					<uni-icons type="checkmarkempty" color="red" size="30" />
				</view>
				<view class="table-td">
					<text>专属客服</text>
					<uni-icons type="closeempty" color="red" size="30" />
					<uni-icons type="checkmarkempty" color="red" size="30" />
				</view>
				<view class="table-td">
					<text>终身换机</text>
					<uni-icons type="closeempty" color="red" size="30" />
					<uni-icons type="checkmarkempty" color="red" size="30" />
				</view>
			</view>
		</view>
	   <cosPupop ref="openP" />
	</view>
</template>

<script>
	import cosPupop from "@/components/cos-pupop/cos-pupop.vue"
	export default {
		components:{cosPupop},
		data() {
			return {
				navItems: [{
						title: '返现',
						icon: '/static/images/vip (3).png',
						text: '获得更多返现'
					},
					{
						title: '商户',
						icon: '/static/images/vip (7).png',
						text: '专属特权商户'
					},
					{
						title: '身份',
						icon: '/static/images/vip (1).png',
						text: '会员身份标识'
					},
					{
						title: '分红',
						icon: '/static/images/vip (4).png',
						text: '每天都可参与'
					},
					{
						title: '代发',
						icon: '/static/images/vip (2).png',
						text: '企业一件代发'
					},
					{
						title: '会员工具',
						icon: '/static/images/vip (8).png',
						text: '可赚取高额收益'
					},
					{
						title: '客服',
						icon: '/static/images/vip (6).png',
						text: '个人专属客服'
					},
					{
						title: '换机',
						icon: '/static/images/vip (5).png',
						text: '终身免费换机'

					}
				]
			};
		},
		onReady(){
			// this.$refs.openP.open1()
		},
		methods:{
			showMypop(){
				this.$refs.openP.open()
			},
			toParse(){
				uni.navigateTo({
					url: '/pages/parse/parse?title=会员服务协议&code=service_agreement'
				})
			},
			noOpen(){
				uni.showToast({
					icon:'none',
					title: '暂未开放'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		min-height: 100vh;
		background-image: url("/static/vip_bg.jpeg");
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #C4DEFB;
		padding-bottom: 20rpx;

		.main-buttons {
			width: 85vw;
			height: 100rpx;
			background-color: red;
			margin: 0 auto;
			border-radius: 10rpx;
			text-align: center;
			color: #fff;
			line-height: 100rpx;
			font-weight: bold;
			font-size: 40rpx;
			margin-top: 20rpx;
			background: linear-gradient(to top, rgba(82, 154, 238, 1), rgba(82, 154, 238, .9), rgba(82, 154, 238, 0.2));
		}

		.vip-bths {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 25vh;
			color: #fff;
            .tips{
				color: #529AEE;
				cursor: pointer;
			}
			.v-title {
				font-size: 80rpx;
				font-weight: bold;
				color: #fff;
				text-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
				letter-spacing: 10rpx;
			}

			.show-bth {
				cursor: pointer;
				padding: 25rpx 60rpx;
				font-size: 40rpx;
				background: linear-gradient(360deg, #549BEE,#83B7F3);;
				border-radius: 60rpx;
				box-shadow: rgba(255, 255, 255, 1) 0px 0px 5rpx 1rpx inset,
				rgba(0, 0, 0, 0.16) 0px 0px 15rpx 2rpx;
				margin-top: 60rpx;
			}
		}

		.power-list {
			width: 100%;
			margin-top: 10rpx;
			padding: 0 20rpx;

			.list-title {
				display: block;
				width: 100%;
				text-align: center;
				margin: 20rpx 0;
				font-weight: 550;
				color: #529AEE;
			}

			.list-box {
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.list-item {
					width: calc(25% - 20rpx);
					margin-bottom: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-start;
					gap: 10rpx;

					.list-image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						padding: 10rpx;
						background-color: rgba(83, 153, 238, 0.1);
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						border: 1rpx solid #83B9FF;

						image {
							width: 45rpx;
							height: 45rpx;
						}
					}

					.item-title {
						font-weight: 550;
						color: #000;
						font-size: 30rpx;
					}

					.item-text {
						color: #666;
						font-size: 22rpx;
					}
				}
			}

		}

		.power-call {
			width: calc(100% - 60rpx);
			border-radius: 20rpx;
			padding: 20rpx 20rpx;
			background-color: #FEFBF1;
			margin: 30rpx auto;

			.call-title {
				display: block;
				font-size: 30rpx;
				color: #529AEE;
				padding: 20rpx 0;
			}

			.call-item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.call-left {
					display: flex;
					flex-direction: column;

					.call-name {
						font-size: 32rpx;
						color: #000;
						font-weight: 550;
					}

					.call-text {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						margin-top: 10rpx;

						.red-x {
							color: #FF0000;
							margin-right: 10rpx;
						}
					}
				}

				.buttons {
					background-color: #2E3540;
					color: #FFFFFF;
					font-size: 26rpx;
					border-radius: 30rpx;
					font-size: 22rpx;
					font-weight: 550;
					padding: 10rpx 20rpx;
				}
			}

			.call-fin {
				display: block;
				text-align: center;
				font-weight: 550;
				color: #000;
				font-size: 32rpx;
			}

			.texts-fin {
				min-height: 80rpx;
				font-size: 24rpx;
				padding: 20rpx 0;
			}
		}

		.return-list {
			width: calc(100% - 60rpx);
			margin: 0 auto;
			border-radius: 20rpx;

			.return-title {
				width: 100%;
				text-align: center;
				margin: 20rpx 0;
				font-weight: 550;
				color: #529AEE;
			}

			.return-table {
				margin-top: 30rpx;
				width: 100%;
				border-radius: 20rpx;
				background-color: #FEF9E9;
				overflow: hidden;

				.table-tr {
					width: 100%;
					display: flex;
					padding: 20rpx 40rpx;
					background: linear-gradient(to top, rgba(82, 154, 238, 1), rgba(82, 154, 238, .9), rgba(82, 154, 238, 0.5));

					text {
						font-size: 35rpx;
						font-weight: 550;
						flex: 1;
						text-align: center;

					}
				}

				.table-td {
					width: 100%;
					display: flex;
					padding: 20rpx 40rpx;
					color: #575757;
					border-bottom: 1rpx solid #d5e3f5;

					text {
						font-size: 30rpx;
						font-weight: 400;
						flex: 1;
						text-align: center;
					}

					uni-icons {
						flex: 1;
					}
				}

				.table-td:last-child {
					border-bottom: none;
				}
			}
		}
	}
</style>